<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue';
	export default {
		name: 'ChartsuperBar',
		props: {
			chartData: Object
		},
		data() {
			return {};
		},
		created() {},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
			
		},
		components: {
			f2
		},
		methods: {
			
			initChart(F2, config) {
				const map = {};
				this.chartData.data.forEach(function(obj) {
				  map[obj.grade] = obj.num + '%';
				});
				const chart = new F2.Chart(config);
				chart.source(this.chartData.data, {
					percent: {
						formatter: function formatter(val) {
							return val + '%';
						}
					}
				});
				chart.coord('polar', {
					transposed: true,
					innerRadius: 0.8,
					radius: 0.95
				});
				chart.axis(false);
				chart.tooltip({
					background: {
						radius: 4,
						fill: '#ffffff',
						padding: [6, 10],
						shadowColor: 'rgba(0, 0, 0, 0.2)',
						shadowBlur: 20
					},
					titleStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'top'
					},
					nameStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					valueStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					onShow: (obj) => {
						obj.items[0].name = this.chartData.name;
						obj.items[0].value += this.chartData.unit;
					}
				});
				chart.legend({
					position: 'right',
					align: 'center',
					offsetX: 10,
					itemWidth: 56, // 图例项按照实际宽度渲染
					wordSpace: 14,
					nameStyle: {
						fill: '#394954', // 文本的颜色
					},
					itemFormatter: function itemFormatter(val) {
						return val + '    ' + map[val];
					},
				});
				chart.interval()
					.position('const*num')
					.color('grade', ['#1EA9FB', '#FCB94F','#9486EF','#48BC7C'])
					.adjust('stack');

				chart.render();
			}
		}

	}
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
